<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function $(elementId){
            return document.getElementById(elementId);
        }

        function checkUserName() {
            // //向服务器发送ajax的GET请求，第一个参数为应用控制器的访问路径，第二个参数是请求服务器的表单数据
            //     axios.get("/ajax/checkName", {
            //         params:{name:$('name').value}
            //     }).then(e => {  //处理响应信息
            //         var info = e.data;  //得到响应信息的信息体
            //         if (info == 'yes'){
            //             $('nameSpan').innerHTML ='该用户已存在';
            //             $('nameSpan').style.color = 'red';
            //         }else {
            //             $('nameSpan').innerHTML = '可以使用';
            //             $('nameSpan').style.color = 'green';
            //         }
            //         })
            // }

            var param = new URLSearchParams();
            param.append("name",$('name').value);
            //向服务器发送ajax的post请求，第一个参数为请求应用控制器的URL路径
            //第二个参数为表单数据
            axios.post("/ajax/checkName",param).then(e => {
                var info = e.data;
                if (info == 'yes'){
                    $('nameSpan').innerHTML = '该用户已存在';
                    $('nameSpan').style.color = 'red';
                }else {
                    $('nameSpan').innerHTML = '可以使用';
                    $('nameSpan').style.color = 'green';
                }
            });
        }

        async function update(){
            var x = 1;
            await axios.get("/ajax/update",null).then(e => {
                x = e.data;
            })
            alert(x);
        }
    </script>
</head>
<body>
    <form action="/ajax/checkName">
        用户名：<input type="text" id="name" onblur="checkUserName()">
        <span id="nameSpan"></span><br>
        电话：<input type="text" id="phone"><br>
        <input type="submit" value="添加">
        <input type="submit" value="提交">
    </form>

    <input type="button" value="修改" onclick="update()">
</body>
</html>